<template>
	<view class="header" :style="{ paddingTop }">
		<nav-box title="" titleColor="white" @height="navHeight" />
		<view class="content" :style="{ height: 'calc(100vh - ' + paddingTop + ')' }">
			<uni-card is-shadow>
				<view class="city">
					<text class="text">当前位置:</text>
					<text class="title">{{ cityText }}</text>
				</view>
				<view class="day">
					<text class="wendu">{{ setData.now?.temp }}°</text>
					<view>
						<view class="minMax">{{ `${setData.now?.dew}°~${setData.now?.feelsLike}°`}}</view>
						<text>{{setData.now?.text}}</text>
					</view>
				</view>
				<view class="extra">
					<view>
						<view class="title">{{setData.now?.humidity}}</view>
						<text>湿度</text>
					</view>
					<view>
						<view class="title">{{setData.now?.pressure}}Pa</view>
						<text>气压</text>
					</view>
					<view>
						<view class="title">{{setData.now?.windScale}}级</view>
						<text>{{ setData.now?.windDir }}</text>
					</view>
				</view>
			</uni-card>
			<hours v-if="setData.hourly" :hourly="setData.hourly" />
			<future v-if="setData.daily" :daily="setData.daily" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import NavBox from "@/components/navbox/index.vue";
	import hours from "./components/hours.vue"
	import future from "./components/future.vue";
	import {
		TencentGetLocalCity
	} from '@/utils/city';
	import {
		app
	} from "@/utils/app.js"
	const APIKEY = '5dd8a650256549e29e51e7382f5ddc49';
	const paddingTop = ref('0px');
	const cityText = ref('北京');
	const location = ref();
	const citydata = ref();
	const setData = ref({
		now: {},
		hourly: [],
		daily: []
	});

	const navHeight = (e) => {
		paddingTop.value = e;
	};

	const selectLocation = () => {
		uni.getLocation({
			type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				location.value = res.longitude + "," + res.latitude;
				cityGet(res.longitude, res.latitude); // 获取城市信息
				getWeather(); // 获取天气信息
			},
			fail(err) {
				uni.showModal({
					title: '获取地图位置失败',
					content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
					success(mRes) {
						if (mRes.confirm) {
							uni.openSetting({
								success: function(data) {
									if (data.authSetting["scope.userLocation"] === true) {
										selectLocation();
									} else {
										uni.showToast({
											title: '授权失败',
											icon: 'none',
											duration: 1000
										});
									}
								},
								fail(err) {
									uni.showToast({
										title: '唤起设置页失败，请手动打开',
										icon: 'none',
										duration: 1000
									});
								}
							});
						}
					}
				});
			}
		});
	};

	//获取所在位置信息
	const cityGet = async (longitude, latitude) => {
		try {
			const cityInfo = await TencentGetLocalCity(longitude, latitude);
			console.log('城市信息：', cityInfo);
			citydata.value = cityInfo.result;
			cityText.value = cityInfo.result.address_component?.city + cityInfo.result.address_component?.district;
		} catch (error) {
			uni.showToast({
				title: '获取城市信息失败',
				icon: 'none',
				duration: 2000
			});
			console.error('获取城市信息失败：', error);
		}
	};

	/** 获取天气 */
	const getWeather = () => {
		uni.showLoading({
			title: '加载中',
		});
		//现在天气信息
		uni.request({
			url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + '&location=' + location.value,
			success(res) {
				console.log(res, 'now')
				setData.value.now = res.data.now;
			}
		});
		//24小时天气信息
		uni.request({
			url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + '&location=' + location.value,
			success(res) {
				console.log(res, 'hourly')
				let data = res.data
				res.data.hourly.forEach(function(item) {
					item.time = app.formatTime(new Date(item.fxTime)).hourly;
				});
				setData.value.hourly = data.hourly;
			}
		});
		//七天天气信息
		uni.request({
			url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + '&location=' + location.value,
			success(res) {
				let data = res.data
				data.daily.forEach(function(item) {
					item.date = app.formatTime(new Date(item.fxDate)).daily;
					item.dateToString = app.formatTime(new Date(item.fxDate)).dailyToString;
				});
				setData.value.daily = data.daily;
				uni.hideLoading();
			}
		});
	};

	onMounted(() => {
		selectLocation();
	});

	watch(() => setData.value, (val) => {
		console.log(val, '天气')
	}, {
		deep: true
	})
</script>

<style lang="scss">
	.header {
		background: linear-gradient(to bottom, #6295f1, #f7f8fa);
	}

	.content {
		width: 100%;
		overflow-y: scroll;

		.text {
			font-size: 40rpx;
			font-weight: bold;
		}

		.city {
			display: flex;
			align-items: center;

			.title {
				color: royalblue;
				font-size: 40rpx;
				margin-left: 16rpx;
			}
		}

		.day {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 48rpx;

			.wendu {
				font-size: 36px;
				color: royalblue;
				margin-right: 24rpx;
			}

			.minMax {
				background: linear-gradient(to right, blue, red);
				-webkit-background-clip: text;
				color: transparent;
			}
		}

		.extra {
			display: flex;
			justify-content: space-around;
			text-align: center;
			margin-top: 24rpx;

			.title {
				font-size: 32rpx;
			}
		}
	}
</style>